<template>
	<view class="custom-info">
		<view class="title item">客户信息</view>		
		<view class="container">
			<formItem 
			   v-for="(item,index) in cusList"
			   :key="index"
			   :label="item.label" 
			   :isSlot="item.isSlot"
			   :slotName="item.slotName"
			   :placeholder="item.placeholder"
			   v-model="custInfo[item.value]" 
			   titleType="dotted-title">
			   <template #license>
			   	<view @click="toSearch">
			   		<text style="color:#4C73BD;">{{custInfo.carLicense}}</text>
			   		<u-icon name="arrow-right" color="#4C73BD"></u-icon>
			   	</view>
			   </template>
			</formItem>		
		</view>		
		<u-popup v-model="show" mode="bottom" height="400rpx">
			<view class="search-box">
				<view class="search-input">
					<input type="text" v-model="searNo" placeholder="请输入查询车牌号" maxlength="8">
				</view>
				<view class="search-btn">
					<!-- <u-button type="success" style="width: 45%;" @click="addCarno">他牌新增</u-button> -->
					<u-button type="primary" style="width: 80%;" @click="searchCarNo">查询保存</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getCustinfoByLicense } from '@/api/carPreFlight.js'
	export default {
		props: {
			type: {
				type: String,
				default: ''
			}
		},
		computed:{
			formDetail(){
				console.log('$store',this.$store)
				if(this.formType !== 'add'){
					this.custInfo = this.$store.state.carPreFlight.formDetail.baseVO
					return this.$store.state.carPreFlight.formDetail
				}				
			}
		},
		data() {
			return {
				show:false,
				searNo:null,
				cusList:[
					{
						label:'送修人',
						value:'contactorName',
						placeholder:'请输入送修人'
					},{
						label:'车牌号',
						isSlot:true,
						slotName:'license'
					},{
						label:'联系电话',
						value:'contactorTel',
						placeholder:'请输入联系电话'
					}
				],
				custInfo: {
					contactorName: '', 
					carLicense: '点击查询车辆信息',
					contactorTel: '',
				}
			}
		},
		methods: {
			// 输入车牌
			onCarNumChange(e) {
				this.custInfo.carNum = e.detail.value;
				this.getCustInfo();
			},
			toSearch(){
				if(this.$store.getters.isEdit) return
				this.show = true 
			},
			// 查询用户信息
			getCustInfo() {
				console.log(this.custInfo.carNum)
			},
			//根据车牌号查询车辆信息
			async searchCarNo(){
				const params = {
					carLicense:this.searNo
				}
				let res = await getCustinfoByLicense(params)
				if(!res.rows){
					uni.showToast({
						title:'未查询到该车辆信息!',
						icon:'none'
					})
				} else {
					this.custInfo = res.rows
				}
				this.show = false 
			},
			addCarno(){
				this.custInfo.license = this.searNo
			}
		}
	}
</script>

<style scoped lang="scss">
	.custom-info{
		background: #fff;
		border-radius: 10rpx;
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		border-bottom: 1px solid #E5e5e5;
	}
	.item.bottom {
		border-bottom: none;
	}
	.title{
		font-size: 32rpx;
		color: #333;
	}	
	.search-box{
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.search-input{
			width: 80%;
			height: 80rpx;			
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			padding-left: 12rpx;
			align-items: center;			
			background-color: $uni-bg-color-grey;
			input{
				width: 100%;
			}
		}
		.search-btn{
			width: 80%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			margin-top: 24rpx;
		}
	}
</style>
